<template>
    <div class="test-school-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
            <el-form ref="schoolDialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="部门id" prop="deptId">
                            <el-input v-model="state.ruleForm.deptId" placeholder="请输入部门id" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="state.ruleForm.username" placeholder="请输入用户名" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="state.ruleForm.password" placeholder="请输入密码" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户昵称" prop="nickName">
                            <el-input v-model="state.ruleForm.nickName" placeholder="请输入用户昵称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户类型（0、管理员；1、普通用户）" prop="type">
                            <el-input v-model="state.ruleForm.type" placeholder="请输入用户类型（0、管理员；1、普通用户）" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="用户邮箱" prop="email">
                            <el-input v-model="state.ruleForm.email" placeholder="请输入用户邮箱" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="state.ruleForm.phone" placeholder="请输入手机号码" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="性别（0、男；1、女）" prop="sex">
                            <el-input v-model="state.ruleForm.sex" placeholder="请输入性别（0、男；1、女）" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="头像" prop="avatarPath">
                            <el-input v-model="state.ruleForm.avatarPath" placeholder="请输入头像" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="帐号状态（0、正常；1、禁用）" prop="status">
                            <el-input v-model="state.ruleForm.status" placeholder="请输入帐号状态（0、正常；1、禁用）" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="state.ruleForm.remark" placeholder="请输入备注" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="testSchoolDialog">
    import { reactive, ref, nextTick } from 'vue';
    import constConfig from '/@/utils/constConfig';
    import { schoolApi } from '/@/api/test/school';

    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);

    // 定义变量内容
    const schoolDialogFormRef = ref();
    const state = reactive({
        ruleForm: {} as SchoolType,
        dialog: {
            isShowDialog: false,
            type: '',
            title: '',
            submitTxt: '',
        },
        rules: {
            id:{ required: true, message: "用户id不能为空", trigger: "blur" },
            deptId:{ required: true, message: "部门id不能为空", trigger: "blur" },
            username:{ required: true, message: "用户名不能为空", trigger: "blur" },
            password:{ required: true, message: "密码不能为空", trigger: "blur" },
            nickName:{ required: true, message: "用户昵称不能为空", trigger: "blur" },
            type:{ required: true, message: "用户类型（0、管理员；1、普通用户）不能为空", trigger: "blur" },
            email:{ required: true, message: "用户邮箱不能为空", trigger: "blur" },
            phone:{ required: true, message: "手机号码不能为空", trigger: "blur" },
            sex:{ required: true, message: "性别（0、男；1、女）不能为空", trigger: "blur" },
            avatarPath:{ required: true, message: "头像不能为空", trigger: "blur" },
            status:{ required: true, message: "帐号状态（0、正常；1、禁用）不能为空", trigger: "blur" },
            delFlag:{ required: true, message: "删除标识不能为空", trigger: "blur" },
            remark:{ required: true, message: "备注不能为空", trigger: "blur" },
        },
    });

    // 打开弹窗
    const openDialog = (type: string, row: SchoolType) => {
        state.dialog.type = type;
        state.dialog.isShowDialog = true;
        state.ruleForm = row;
        if (type === constConfig.dialogType.add) {
            state.dialog.title = '新增学校';
            state.dialog.submitTxt = '新 增';
        } else {
            state.dialog.title = '修改学校';
            state.dialog.submitTxt = '修 改';
        }
        nextTick(() => {
            schoolDialogFormRef.value.clearValidate();
        });
    };
    // 关闭弹窗
    const closeDialog = () => {
        state.dialog.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
        closeDialog();
    };
    // 提交
    const onSubmit = () => {
        schoolDialogFormRef.value.validate((valid: boolean) => {
            if (valid) {
                if (state.dialog.type === constConfig.dialogType.add) {
                    schoolApi().save(state.ruleForm).then(() =>{
                        closeDialog();
                        emit('refresh');
                    })
                } else {
                    schoolApi().update(state.ruleForm).then(()=>{
                        closeDialog();
                        emit('refresh');
                    })
                }
            }
        })
    };

    // 暴露变量
    defineExpose({
        openDialog,
    });
</script>
